<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Quản lý menu</title>
        <link rel="stylesheet" href="../../../public/css/screen.css" type="text/css" media="screen" title="default" />
        <link rel="stylesheet" href="../../../public/js/jquery/jquery-ui.css"/>
        <link rel="stylesheet" href="../../../public/css/edit.css"/>
        <link rel="stylesheet" href="../../../public/css/menu_darggable.css" type="text/css"/>

        <!--  jquery core -->
        <script src="../../../public/js/jquery/jquery-1.8.2.js" type="text/javascript"></script>
        <script src="../../../public/js/jquery/jquery-ui.js" type="text/javascript"></script>
        <script src="../../../public/js/jquery/jquery.mjs.nestedSortable.js" type="text/javascript"></script>
        <script src="../../../public/js/jquery/jquery.nestable.js" type="text/javascript"></script>
        <!--  checkbox styling script -->
        <!-- Custom jquery scripts -->
        <!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
        <script src="../../../public/js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(document).pngFix( );
            });
        </script>
    </head>
    <body> 
        {banner}
        <div class="clear">&nbsp;</div>
        {menu}
        <div class="clear">&nbsp;</div>
        {frm_menu_list}
        <div class="clear">&nbsp;</div>
        {footer}
        <script type="text/javascript">
            $(document).ready(function()
            {
                var updateOutput = function(e)
                {
                    var list   = e.length ? e : $(e.target),
                    output = list.data('output');
                    if (window.JSON) {
                        output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
                    } else {
                        output.val('JSON browser support required for this demo.');
                    }
                };

                // activate Nestable for list 1
                $('#nestable').nestable({
                    group: 1
                })
                .on('change', updateOutput);
                
                updateOutput($('#nestable').data('output', $('#data_menu_json')));
            });
            var menuFirst = $('#menu_new').html();
            //Create Ajax funtion to save menu
            $('#btn_save_menu').click(function(){
                var now_temp = $('#menu_new').html();
                var jsondata = $('#data_menu_json').val();
                //Get menu name variable
                var menuname = $('#menuname').val();
                //Get select menu old
                var selectvalue = $('#listmeuold').val();
                if(menuname != null && menuname !='' && selectvalue == 0){
                    $.ajax({
                        type: 'POST',
                        url:'action.php?act=1',
                        dataType:'json',
                        data:{
                            'name':menuname,
                            'json':jsondata,
                            'html':now_temp
                        },
                        success:function(data){
                            if(data.stt==true){
                                $(this).clearMenuData();
                                $('#menu_old').html(now_temp);
                                $('#listmeuold').html(data.option);
                                $('#menu_new').html(menuFirst);
                            }
                        },
                        error: function(data,textStatus){
                            $('#menu_old').html('<b>Sorry server too busy. Please try again!</b>');
                        }
                    });
                }else{
                    if(selectvalue != 0 && menuname != ''){
                        console.log("Ok boy");
                        $.ajax({
                            type: 'POST',
                            url:'action.php?act=2',
                            dataType:'json',
                            data:{
                                'json':jsondata,
                                'html':now_temp,
                                'optionId':selectvalue,
                                'namemenu':menuname
                            },
                            success:function(data){
                                if(data.stt==true){
                                    $(this).clearMenuData();
                                    $('#menu_old').html(now_temp);
                                    $('#listmeuold').html(data.option);
                                    $('#menu_new').html(menuFirst);
                                }
                            }
                        });
                    }else{
                        alert('Vui lòng chọn một menu cần sửa!');
                    }
                }
            });
            
            $('#listmeuold').change(function(){
                var str = "";
                $("select option:selected").each(function () {
                    str = $(this).text();
                });
                $('#menuname').val(str);
                var selectvalue = $('#listmeuold').val();
                // alert(selectvalue);
                $.ajax({
                    type: 'GET',
                    url:'action.php?act=3',
                    data:{
                        'idmenu':selectvalue
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.stt==true){
                            $('#menu_old').html(data.menu);
                        }
                    }
                });
            });
            
            $.fn.clearMenuData = function(){
                $('#menuname').val('');
                $('#namelink').val('');
                $('#menulinkname').val('');
                $('#nameslinklug').val('');
                $('#menu_new').html(menuFirst);
            }
            
            $('#frm_add_link_menu')
        </script>  
    </body>
</html>